<template>
  <CommonImgTemplate>
    <template #topMenu>
      <div class="menu">
        <el-upload
          action
          accept=".png, .jpg, .jpeg"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleFileChange"
        >
          <el-button type="primary" size="small">
            选择图片
            <i class="iconfont icon-dakaiwenjianjia"></i>
          </el-button>
        </el-upload>

        <div class="input">
          <el-input v-model="externalUrl" placeholder="输入外部图片URL" size="small" clearable>
            <template #append>
              <el-button size="small" :disabled="!externalUrl" @click="externalUrlConverBase64"> 转换 </el-button>
            </template>
          </el-input>
        </div>

        <a v-if="base64Url" :href="base64Url" :download="imgName">
          <el-button type="success" size="small" :disabled="!base64Url">
            保存图片
            <i class="iconfont icon-baocun"></i>
          </el-button>
        </a>
      </div>
    </template>

    <template #topImg>
      <img :src="base64Url" />
    </template>

    <template #bottomMenu>
      <div class="url-title flex-column-center">
        <p>Base64:</p>
        <el-button type="success" size="small" :disabled="!base64Url" @click="useCopy(base64Url)">
          复制地址
          <i class="iconfont icon-fuzhi"></i>
        </el-button>
      </div>
    </template>

    <template #bottomContent>
      <el-input v-model="base64Url" type="textarea" resize="none" />
    </template>
  </CommonImgTemplate>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import useCopy from "@/hook/useCopy";
import { fileReaderFile, canvasToBase64 } from "@/utils";
import { showLoading, hiddenLoading, message } from "@/utils/Element";
import { UploadFile, UploadFiles } from "element-plus";
import dayjs from "dayjs";

const externalUrl = ref(
  "https://img2.baidu.com/it/u=4186398918,3777941720&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1667062800&t=c9c07b5ac9f1b54b986712072bb10125"
);
const base64Url = ref("");
const imgName = ref("");

const handleFileChange = async (uploadFile: UploadFile, _uploadFiles: UploadFiles) => {
  imgName.value = uploadFile.name;
  const res = await fileReaderFile(uploadFile.raw as Blob);
  if (typeof res === "string") base64Url.value = res;
};

const externalUrlConverBase64 = async () => {
  try {
    showLoading();
    const result = await canvasToBase64(externalUrl.value);
    if (result === "[object Event]") {
      message.warning("转换失败, 请检查url");
    } else if (base64Url.value !== result) {
      base64Url.value = result;
      // 设置文件名
      imgName.value = dayjs().format("YYYY_DD_MM hh_mm_ss") + ".png";
    }
  } catch (error) {
    console.log(error);
  } finally {
    hiddenLoading();
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";

.menu {
  width: 40vw;
  min-height: calc(200px - 20px);
  height: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-shadow: $shadow;

  :deep(.el-button) {
    i {
      margin-left: 4px;
    }
  }

  .input {
    width: 100%;
    margin: 10px 0;
  }
  a {
    text-decoration: none;
  }
}

img {
  margin: 0 40px;
  height: 200px;
  object-fit: contain;
}

.url-title {
  margin-right: 10px;
  p {
    color: $success;
    font-weight: bold;
    margin-bottom: 10px;
  }
}

:deep(.el-textarea) {
  height: 100%;
  .el-textarea__inner {
    height: 100%;
  }
}
</style>
